<template>
	<div class="order-status">
		<v-progress-bar :length="progressBarLength" :active="orderStatus.active"></v-progress-bar>
		<ul class="order-progress-text" v-if="orderStatus.type === 'transaction'">
			<li>
				<p class="order-progress-step">{{$t('message.submitOrder')}}</p>
				<!--<p class="order-progress-time">{{ orderDataTime.createTime }}</p>-->
				<p class="order-progress-time">{{ orderDataTime.createTime * 1000 | date }}</p>
			</li>
			<li>
				<p class="order-progress-step">{{$t('message.pay')}}</p>
				<!--<p class="order-progress-time">{{ orderDataTime.payTime }}</p>-->
				<p class="order-progress-time">{{ orderDataTime.payTime * 1000 | date }}</p>
			</li>
			<li>
				<p class="order-progress-step">{{$t('message.shipping')}}</p>
				<!--<p class="order-progress-time">{{ orderDataTime.sartTime }}</p>-->
				<p class="order-progress-time">{{ orderDataTime.sartTime * 1000 | date }}</p>
			</li>
			<li>
				<p class="order-progress-step">{{$t('message.successfulDeal')}}</p>
				<!--<p class="order-progress-time">{{ orderDataTime.endTime }}</p>-->
				<p class="order-progress-time">{{ orderDataTime.endTime * 1000 | date }}</p>
			</li>
		</ul>
		<!--<ul class="order-progress-text order-progress-text-return" v-else>-->
			<!--<li>-->
				<!--<p class="order-progress-step">{{$t('message.returnApplication')}}</p>-->
				<!--<p class="order-progress-time">2017-10-28 11:15:32</p>-->
			<!--</li>-->
			<!--<li>-->
				<!--<p class="order-progress-step">{{$t('message.handling')}}</p>-->
				<!--<p class="order-progress-time"></p>-->
			<!--</li>-->
			<!--<li>-->
				<!--<p class="order-progress-step">{{$t('message.returnSuccess')}}</p>-->
				<!--<p class="order-progress-time"></p>-->
			<!--</li>-->
		<!--</ul>-->
		<div class="order-status-box" :class="{ 'order-status-box-fail': orderStatus.status === 3 }">
			<div class="order-status-title">
				{{$t('message.orderStatus')}}：
        <span :class="{ 'order-status-emphasis': orderStatus.status !== 3 }">{{ statusText }}</span>
        <span class="order-status-title-price" v-if="orderStatus.status === 2">{{$t('message.sum')}}：
          <span class="order-status-emphasis">{{$t('message.currencySymbol')}}{{ sumPrice }}</span></span>
			</div>
			<div class="order-status-tip">
        <!--把步骤0改成3-->
				<div v-if="orderStatus.status === 3">{{$t('message.orderStatus3')}}{{ orderStatus.reason }}</div>
				<div v-if="orderStatus.status === 1">{{$t('message.orderStatus11')}} <span class="order-status-emphasis">{{ timeText }}</span> {{$t('message.orderStatus12')}}</div>
				<div v-if="orderStatus.status === 2">{{$t('message.orderStatus41')}} <span class="order-status-emphasis">{{ timeText }}</span> {{$t('message.orderStatus42')}}</div>
        <!--把步骤3改成6-->
				<div v-if="orderStatus.status === 6">{{$t('message.orderStatus6')}}</div>
        <!--把步骤4改成7-->
        <div v-if="orderStatus.status === 7">{{$t('message.orderStatus7')}}</div>
				<!--<div v-if="orderStatus.status === 5">若买家已收到货物，请及时点击确认收货按钮</div>-->
        <!--把步骤6改成9-->
        <div v-if="orderStatus.status === 8 || orderStatus.status === 9 || orderStatus.status === 12 || orderStatus.status === 13 || orderStatus.status === 14 || orderStatus.status === 24 || orderStatus.status === 26 || orderStatus.status === 15 || orderStatus.status === 16 || orderStatus.status === 17 || orderStatus.status === 18 || orderStatus.status === 19 || orderStatus.status === 20 || orderStatus.status === 22 || orderStatus.status === 23 || orderStatus.status === 25">{{$t('message.orderStatusRest')}}</div>
			</div>
			<div class="order-status-btn-pay">
				<template v-if="orderStatus.status === 2">
            <div @click="saveOrder">
              <router-link :to="{ path: '/pay', query: { type: 1 } }" class="order-status-btn-pay-active">{{$t('message.payNow')}}</router-link>
            </div>
				</template>
				<!--<template v-if="orderStatus.status === 7">-->
					<!--<button type="button" class="order-status-btn-pay-active" @click="toLogistics">查看物流</button>-->
          <!--<router-link class="order-status-btn-pay-active" :to="{path: '/personal/order/logistics', query: {orderId: this.orderId}}" target="_blank">{{$t('message.showLogistics')}}</router-link>-->
				<!--</template>-->
        <!--显示申请售后按钮-->
<!--				<template v-if="orderStatus.status === 8 || orderStatus.status === 9 || orderStatus.status === 12 || orderStatus.status === 13 || orderStatus.status === 14 || orderStatus.status === 24 || orderStatus.status === 26">
          <router-link class="order-status-btn-pay-active" :to="{path: '/personal/order/return', query: {orderId: this.orderId}}" target="_blank" v-if="canReturn === 1">{{ goToReturnsTxt }}</router-link>
          <a href="javascript:void(0)" class="order-status-btn-pay-normal" target="_blank" v-else-if="canReturn === 0">{{ goToReturnsTxt }}</a>
				</template>-->
        <!--申请售后-->
        <template v-if="orderStatus.status === 9">
          <router-link class="order-status-btn-pay-active" :to="{path: '/personal/order/afterSale', query: {orderId: this.orderId}}" target="_blank" v-if="canReturn === 1">{{ $t('message.applyReturn') }}</router-link>
          <a href="javascript:void(0)" class="order-status-btn-pay-normal" target="_blank" v-else-if="canReturn === 0">{{ $t('message.applyReturn') }}</a>
        </template>
        <!--退货进度-->
        <template v-if="orderStatus.status === 8 || orderStatus.status === 12 || orderStatus.status === 13 || orderStatus.status === 14 || orderStatus.status === 24 || orderStatus.status === 26">
          <router-link class="order-status-btn-pay-active" :to="{path: '/personal/order/return', query: {orderId: this.orderId}}" target="_blank" v-if="canReturn === 1">{{ $t('message.returnState') }}</router-link>
          <a href="javascript:void(0)" class="order-status-btn-pay-normal" target="_blank" v-else-if="canReturn === 0">{{ $t('message.returnState') }}</a>
        </template>
        <!--换货进度-->
        <template v-if="orderStatus.status === 15 || orderStatus.status === 16 || orderStatus.status === 17 || orderStatus.status === 18 || orderStatus.status === 19 || orderStatus.status === 20 || orderStatus.status === 22 || orderStatus.status === 23 || orderStatus.status === 25">
          <router-link class="order-status-btn-pay-active" :to="{path: '/personal/order/barter', query: {orderId: this.orderId}}" target="_blank" v-if="canReturn === 1">{{ $t('message.barterState') }}</router-link>
          <a href="javascript:void(0)" class="order-status-btn-pay-normal" target="_blank" v-else-if="canReturn === 0">{{ $t('message.barterState') }}</a>
        </template>
			</div>
		</div>
	</div>
</template>

<script>
import VProgressBar from '@/components/base/VProgressBar'
import { setCookie } from '@/util/util'

export default {
  name: 'PersonalOrderDetailStatus',
  components: {
    VProgressBar
  },
  props: {
    orderStatus: {
      type: Object,
      default: {
        status: 6,
        active: 1,
        time: '11111110',
        reason: '该商品缺货',
        type: 'transaction'
      }
    },
    orderDataTime: {
      type: Object,
      default: {}
    },
    sumPrice: {
      type: [Number, String],
      default: 0
    },
    orderId: {
      type: String,
      default: ''
    },
    canReturn: {
      type: [String, Number],
      default: ''
    }
  },
  data () {
    return {
      time: this.orderStatus.time
    }
  },
  computed: {
    goToReturnsTxt () {
      if (this.orderStatus.status === 8 || this.orderStatus.status === 12 || this.orderStatus.status === 13 || this.orderStatus.status === 14) {
        return this.$t('message.returnState')
      } else if (this.orderStatus.status === 9) {
        return this.$t('message.applyReturn')
      }
    },
    progressBarLength () {
      if (this.orderStatus.type === 'transaction') {
        return 4
      } else {
        return 3
      }
    },
    statusText () {
      //        把步骤0改成3
      if (this.orderStatus.status === 3) {
        return `${this.$t('message.hasBeenCancelled')}`
      } else if (this.orderStatus.status === 1) {
        return `${this.$t('message.underReview')}`
      } else if (this.orderStatus.status === 2) {
        return `${this.$t('message.paymentPending')}`
      //        把步骤3改成5
      } else if (this.orderStatus.status === 6) {
        return `${this.$t('message.waitToSend')}`
        //        把步骤4改成7
      } else if (this.orderStatus.status === 7) {
        return `${this.$t('message.hasBeenShipped')}`
      } else if (this.orderStatus.status === 5) {
        return `${this.$t('message.hasReceived')}`
      //        把步骤6改成9
      } else if (this.orderStatus.status === 8 || this.orderStatus.status === 9 || this.orderStatus.status === 12 || this.orderStatus.status === 13 || this.orderStatus.status === 14 || this.orderStatus.status === 15 || this.orderStatus.status === 16 || this.orderStatus.status === 17 || this.orderStatus.status === 18 || this.orderStatus.status === 19 || this.orderStatus.status === 20 || this.orderStatus.status === 22 || this.orderStatus.status === 23 || this.orderStatus.status === 24 || this.orderStatus.status === 25 || this.orderStatus.status === 26) {
        return `${this.$t('message.successfulDeal')}`
      }
    },
    timeText () {
      let totalSecond = parseInt(this.orderStatus.time) / 1000
      let second = parseInt(totalSecond % 60)
      second = second < 10 && second >= 0 ? '0' + second : second
      let totalMinute = parseInt(totalSecond / 60)
      if (this.orderStatus.status === 1) {
        let minute = totalMinute < 10 && totalMinute >= 0 ? '0' + totalMinute : totalMinute
        return minute + this.$t('message.minute') + second + this.$t('message.second')
      } else if (this.orderStatus.status === 2) {
        let minute = totalMinute % 60
        minute = minute < 10 && minute >= 0 ? '0' + minute : minute
        let hour = parseInt(totalMinute / 60)
        hour = hour < 10 && hour >= 0 ? '0' + hour : hour
        return hour + this.$t('message.hour') + minute + this.$t('message.minute') + second + this.$t('message.second')
      }
    }
  },
  watch: {
    timeText (val) {
      if (val) {
        let timeNum = val.replace(/[\u4e00-\u9fa5]/g, '')
        if (timeNum === '000000') {
          console.log('倒计时结束，刷新数据')
          this.$emit('update-data')
        }
      }
    }
  },
  methods: {
    countdown () {
      this.timer = setInterval(() => {
        // if (this.orderStatus.time >= 1000) {
        this.orderStatus.time -= 1000
        // } else {
        //   clearInterval(this.timer)
        // }
      }, 1000)
    },
    toLogistics () {
      this.$router.push({ path: '/personal/order/logistics' })
    },
    saveOrder () {
      // 存储支付结果信息
      let obj = JSON.stringify({ goodsPrice: this.sumPrice, orderNumber: this.orderId })
//      sessionStorage.setItem('payResult', obj)
      setCookie('payResult', obj)
    }
  },
  mounted () {
    this.countdown()
  }
}
</script>

<style scoped>
.order-status {

}

.order-progress-text {
  width: 800px;
  margin: 20px auto 0;
  overflow: hidden;
}

.order-progress-text li {
  float: left;
  width: 200px;
  text-align: center;
}

.order-progress-text .order-progress-step {
  height: 22px;
  line-height: 22px;
  font-size: 16px;
  color: #717171;
}

.order-progress-text .order-progress-time {
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  color: #a5a5a5;
  margin-top: 8px;
}

.order-progress-text-return {
	width: 600px;
}

.order-status-box {
	border: 1px solid #ff600a;
	background-color: #fffdf4;
	margin-top: 59px;
	padding: 23px;
	position: relative;
}

.order-status-box-fail {
	border: 1px solid #e0e0e0;
	background-color: #f7f7f7;
}

.order-status-title {
	height: 25px;
	line-height: 25px;
	font-size: 18px;
}

.order-status-emphasis {
	color: #ff600a;
}

.order-status-title-price {
	margin-left: 60px;
}

.order-status-tip {
	line-height: 20px;
	font-size: 14px;
	color: #a5a5a5;
	margin-top: 16px;
  width: 930px;
}

.order-status-btn-pay {
	height: 46px;
	font-size: 0;
	position: absolute;
	top: 30px;
	right: 23px;
}
.order-status-btn-pay a {
  display: inline-block;
}
.order-status-btn-pay button, .order-status-btn-pay a {
	width: 130px;
	height: 46px;
  line-height: 46px;
  text-align: center;
	border: 0;
	font-size: 16px;
	margin-left: 16px;
	cursor: pointer;
}

.order-status-btn-pay-active {
	background-color: #ff600a;
	color: #fff;
}

.order-status-btn-pay-normal {
	background-color: #f2f2f2;
	color: #666;
}

.order-status-btn-pay-active:hover {
	background-color: #ff3c00;
}

.order-status-btn-pay-active:active {
	background-color: #e83700;
}
</style>
